<template>
  <div class="home">
    <el-card class="home-card">
      <template #header>
        <div class="card-header">系统首页</div>
      </template>
      <div v-if="currentTab === 'intro'">
        <h3>系统介绍</h3>
        <p>FAMES（节庆活动评估管理系统）用于支撑节庆活动的指标体系管理、数据采集、评估计算与报告生成等核心流程。</p>
        <ul>
          <li>指标管理：维护指标版本、维度、主题与指标项。</li>
          <li>活动与事件：管理各活动与其事件记录。</li>
          <li>评估与报告：评分录入、自动汇总与报告生成。</li>
          <li>RBAC权限：按角色分配菜单与功能权限。</li>
        </ul>
      </div>
      <div v-else>
        <h3>节庆活动介绍</h3>
        <p>围绕本地与主题节庆活动，结合文化特色，设计活动内容并提升公众参与度。</p>
        <ul>
          <li>主题策划：围绕节庆主题组织活动。</li>
          <li>公众参与：线下互动与线上传播。</li>
          <li>影响评估：指标体系量化活动效果。</li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const currentTab = computed(() => (typeof route.query.tab === 'string' ? route.query.tab : 'intro'))
</script>

<style scoped>
.home { padding: 24px; }
.home-card { max-width: 900px; margin: 0 auto; }
.card-header { font-weight: 600; }
</style>